<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login</title>
    
    <link rel="stylesheet" type="text/css" href="../css/forPage.css">
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">

    <script src="../JQuery/JQuery-2.1.4.min.js"></script>
    <script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<!--    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>-->
</head>

<body>
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        开始演示模态框
    </button>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        文件信息
                    </h4>
                </div>
                <div class="modal-body">

                    <div>
                        <label>文件名:</label>
                        <span id="fileName">test.txt</span>
                    </div>

                    <div>
                        <label>创建时间:</label>
                        <span id="date">date</span>
                    </div>

                    <div>
                        <label>文件类型:</label>
                        <span id="fileType">type</span>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" id="closeBtn">
                            close
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </div>


    <form id="uploadForm" enctype="multipart/form-data">
        <input id="file" type="file" name="file"/>
        <button id="upload" type="button">upload</button>
    </form>

    <script>

        jQuery('#closeBtn').on('click',function(){
            $('#myModal').modal('hide');
        })

        jQuery('#upload').on('click',function (){
            var filename = jQuery('#file').val();
            var path = sessionStorage.getItem("currentPath");
            var formData = new FormData();
            formData.append('file', $('#file')[0].files[0]);
            formData.append('filename',filename);
            formData.append('path',path);
            alert(filename+";"+path);
            $.ajax({
                url: '/upload',
                type: 'POST',
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
                success:function (){
                    alert("haha");
                }
            })
            //     .done(function(res) {
            // }).fail(function(res) {});
        })



        //点击导入按钮,使files触发点击事件,然后完成读取文件的操作
        $("#fileImport").click(function () {
            $("#files").click();
        })
        function fileImport() {
            //获取读取我文件的File对象
            var selectedFile = document.getElementById('files').files[0];
            var name = selectedFile.name;//读取选中文件的文件名
            var size = selectedFile.size;//读取选中文件的大小
            alert(name+" ; "+size);
            alert(selectedFile);
            var reader = new FileReader();//这是核心,读取操作就是由它完成.
            // reader.readAsArrayBuffer(selectedFile);
            // reader.readAsDataURL(selectedFile);
            // alert(this.result);
            // var path = window.URL.createObjectURL(this.result);

            reader.readAsText(selectedFile);//读取文件的内容,也可以读取文件的URL
            reader.onload = function () {
                //当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可
                // console.log(this.result);

                alert(this.result);
            }

            var d={
                "currentPath":sessionStorage.getItem("currentPath"),
                "filename":name,
                // "file":selectedFile
            };
            // var reader = new FileOutputStream()

            var url = "/upload";
            $.ajax({
                type:"post",
                data:d,
                url:url,
                success:function (data){

                }
            })



            // selectedFile.path;
            // var path =  window.createObjectURL(selectedFile);
            // var path = window.URL.createObjectURL(selectedFile);
            //
            // alert(path);

        }

    </script>

</body>

</html>